import React, { useEffect, useState, useRef } from 'react'
import $axios from '../../utils/axios'
import { Space, Table, Button, Form, Input, Select, DatePicker, Divider } from 'antd';
import type { DatePickerProps, RangePickerProps } from 'antd/es/date-picker';
import type { ColumnsType } from 'antd/es/table';
const { RangePicker } = DatePicker;



import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use(
  [GridComponent, LineChart, CanvasRenderer])


export default function ResidentAbHealthStatistics() {
  const [form] = Form.useForm();
  //标签数据
  const [tags, setTags] = useState()
  //机构数据
  const [allOrgan, setAllOrgan] = useState([])
  //对应的团队数据
  const [teamData, setTeamData] = useState([])
  //表头
  const columns: ColumnsType<any> = [
    {
      title: '日期',
      dataIndex: 'number',
      key: 'number',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '目标签约量',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '实际签约量',
      dataIndex: 'count',
      key: 'count',
    },
    {
      title: '签约完成率',
      dataIndex: 'precent',
      key: 'precent',
    },
  ];
  //表格数据源
  const data: any = tags
  //获取所有机构
  const getAllOrgan = () => {
    $axios({
      url: '/api/getAllChcsOrgan',
      method: 'POST'
    }).then(res => {
      console.log('所有机构', res.data.rows);
      let aa = res.data.rows.map((item: { name: any; id: any; }) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      setAllOrgan(aa)
    })
  }
  //获取团队信息
  const getTeam = (data: any) => {
    console.log('父组件接收', data);
    $axios({
      url: '/api/getTeamByOrganId',
      method: 'POST',
      data: { organId: data }
    }).then(res => {
      console.log('机构对应的团队信息', res.data);
      let aa = res.data.map((item: { name: any; id: any; }) => {
        return {
          value: item.id,
          label: item.name,
        }
      })
      setTeamData(aa)
    })
  }
  const getSignAll = ()=>{
    $axios({
      url:'/api/getSTRSRSDSDed',
      method:'POST',
    }).then(res=>{
      console.log(res.data);
      
    })
  }
  //统计指定月数的居民数量签约量服务量
  const getSignByMonths = ()=>{
    $axios({
      url:'api/getSRSSByMonths',
      method:'POST',
      // data:{
      //   months:7
      // }
    }).then(res=>{
      console.log(res.data,1);
      
    })
  }
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
    getTeam(value)
  };
  const onFinish = (values: any) => {
    console.log(values);
    values.startTime = date[0]
    values.endTime = date[1]
    delete values.times
    console.log(values);
  };
  const dateFormat = 'YYYY-MM-DD';
  const [date, setDate] = useState<any>('')
  const onDateChange = (
    value: DatePickerProps['value'] | RangePickerProps['value'],
    dateString: [string, string] | string,
  ) => {
    console.log('Selected Time: ', value);
    setDate(dateString)
    console.log('Formatted Selected Time: ', dateString);
  };
  useEffect(() => {
    getAllOrgan()
    getSignAll()
    getSignByMonths()
  }, [])

  ////////////////////////////////////////////////
  return (
    <div style={{ background: '#fff', padding: '20px' }}>
      <h3>签约业绩统计</h3>
      <Form
        form={form}
        name="control-hooks"
        onFinish={onFinish}
        style={{ display: 'flex', flexWrap: 'wrap' }}
      >
        <Form.Item name="times" label="预约时间">
          <RangePicker onChange={onDateChange} format={dateFormat}></RangePicker>
        </Form.Item>
        <Form.Item name="organId" label="签约机构">
          <Select
            style={{ width: 300 }}
            onChange={handleChange}
            options={allOrgan}
          />
        </Form.Item>
        <Form.Item name="teamId" label="医生团队">
          <Select
            style={{ width: 200 }}
            onChange={handleChange}
            options={teamData}
          />
        </Form.Item>
        <Form.Item name="teamId" label="医生">
          <Select
            style={{ width: 200 }}
            onChange={handleChange}
            options={teamData}
          />
        </Form.Item>
      </Form>
      <Divider />
      
      <Divider />
      <Table columns={columns} dataSource={data} rowKey='id' />
    </div>
  )
}

